<template>
  <div>
    <div class="topForm">修改密码</div>
    <div class="editForm">

      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="原始密码:" prop="oldPass">
          <el-input type="password" v-model="ruleForm.oldPass" autocomplete="off" placeHolder="请输入原始密码"></el-input>
        </el-form-item>
        <el-form-item label="新密码:" prop="pass">
          <el-input type="password" v-model="ruleForm.pass" autocomplete="off" placeHolder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码:" prop="checkPass">
          <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeHolder="确认新密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="editForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
export default {
  name: "EditPassword",
  data() {
    const PassReg = /^[\u4E00-\u9FA5A-Za-z0-9.]+$/
    var checkOldPass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('旧密码不能为空'))
      }
      setTimeout(() => {
        if (PassReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的旧密码格式'))
        }
      }, 100)
    }
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        return callback(new Error('请输入新密码'));
      }
      setTimeout(() => {
        if (PassReg.test(value)) {
          callback()
        } else {
          callback(new Error('请输入正确的新密码格式'))
        }
      }, 100)
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        setTimeout(() => {
          if (PassReg.test(value)) {
            callback()
          } else {
            callback(new Error('请输入正确的密码格式'))
          }
        }, 100)
        callback();
      }
    };
    return {
      editQuery:{
        newPassword:'',
        oldPassword:'',
      },
      ruleForm: {
        oldPass:'',
        pass: '',
        checkPass: '',
      },
      rules: {
        oldPass:[
          { validator: checkOldPass,trigger: 'blur' }
        ],
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    editForm(ruleForm) {
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          console.log(this.ruleForm)
          this.editQuery.oldPassword = this.ruleForm.oldPass
          this.editQuery.newPassword = this.ruleForm.pass
          // this.getRequest('/cms/user/info/').then((resp)=>{
          //   console.log(resp)
          //   this.editQuery.username = resp.data.username
          // })
          // this.editQuery.username = window.sessionStorage.getItem('username')
          if(this.editQuery.oldPassword == this.editQuery.newPassword){
            this.$message.error('新旧密码不允许相同。')
            this.ruleForm.oldPass = ''
            this.ruleForm.pass = ''
            this.ruleForm.checkPass = ''
          }else{
            this.postRequest('/cms/user/updatePassword',this.editQuery).then((resp)=>{
              if(resp.status === 200){
                this.$message.success('修改成功。')
                window.sessionStorage.clear()
                this.$router.replace('/login')
                location.reload()
              }else{
                this.$message.error('旧密码不正确')
                this.$router.replace('/personCenter/editPassword')
              }
            })
          }
        } else {
          this.$message.error('表单填写错误，请重新填写')
          return false;
        }
      });
    },
    resetForm() {
      this.ruleForm.oldPass = ''
      this.ruleForm.pass = ''
      this.ruleForm.checkPass = ''
    },
    goBack(){

    }
  }
}
</script>

<style scoped>
  .editForm{
    width: 569px;
    height: 179px;
    position: relative;
    left: 20em;
    top: 4em;
  }
  .topForm{
    position: relative;
    left: 22em;
    top: 2em;
  }
</style>